<template>
  <div class="news-list">
    <div class="list-item">
      <i v-lazy:background-image="'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532165488537&di=4516c4e2164cffc5f252415d4bcd70da&imgtype=0&src=http%3A%2F%2Fpic.uzzf.com%2Fup%2F2017-7%2F2017717161329097190.jpg'"></i>
      <h3>微信标题如果这样写,阅读量轻松上万! - A5创业网</h3>
      <p>大家可以看一下这两篇文章的标题特点，是不是有点击进去的欲望?这种标题是非常常见的一种类型，属于留悬念式的标题类型。主要就是为了吸引别人好奇心，以此来吸引别人，其实在微啊!这个曾经估值30亿美元的万人公司为何现在只剩180人?可...</p>
      <span>2017-08-08</span>
      <a href="javascript:;">了解更多</a>
    </div>
      <div class="list-item">
      <i v-lazy:background-image="'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532165488537&di=4516c4e2164cffc5f252415d4bcd70da&imgtype=0&src=http%3A%2F%2Fpic.uzzf.com%2Fup%2F2017-7%2F2017717161329097190.jpg'"></i>
      <h3>微信标题如果这样写,阅读量轻松上万! - A5创业网</h3>
      <p>大家可以看一下这两篇文章的标题特点，是不是有点击进去的欲望?这种标题是非常常见的一种类型，属于留悬念式的标题类型。主要就是为了吸引别人好奇心，以此来吸引别人，其实在微啊!这个曾经估值30亿美元的万人公司为何现在只剩180人?可...</p>
      <span>2017-08-08</span>
      <a href="javascript:;">了解更多</a>
    </div>
  </div>
</template>

<script>
export default {
  

  
}
</script>

<style lang="less" scoped>
.news-list {
  .list-item {
    padding-left: 412px;
    position: relative;
    height: 210px;
    border-bottom: 1px solid #eee;
    margin-top: 30px;
    h3 {
      padding: 5px 0 15px 0;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    p {
      line-height: 26px;
      font-size: 14px;
      color: #999;
      text-indent: 2em;
      height: 104px;
      overflow: hidden;
    }
    i {
      width: 380px;
      height: 185px;
      position: absolute;
      left: 0;
      top: 0;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    span {
      font-size: 14px;
      color: #cccccc;
      position: absolute;
      left: 415px;
      bottom: 25px;
      line-height: 26px;
    }
    a {
      position: absolute;
      right: 10px;
      bottom: 25px;
      width: 100px;
      height: 26px;
      border-radius: 13px;
      background: #ffa93a;
      color: #fff;
      font-size: 14px;
      text-align: center;
      line-height: 26px;
    }
  }
}
</style>

